<template>
  <div class="container-wrap">
    <Banner :data="data.banners"/>

    <Section title="业务及产品" theme="2">
      <div class="section-layout">
        <HomeSection01 :data="data.section1"/>
      </div>
    </Section>

    <Section title="解决方案" theme="1" padding="30px 30px 86px">
      <div class="section-layout">
        <HomeSection02 :data="data.section2" id="section02"/>
        <HomeSection02A :data="data.section2" id="section02A"/>
      </div>
    </Section>

    <Section title="合作客户" theme="2" padding="70px 30px 80px 30px">
      <div class="section-layout">
        <HomeSection03 :data="data.section3"/>
      </div>
    </Section>
  </div>
</template>

<script setup>
import {ref} from "vue";
import Section from "@/components/layout/Section.vue";
import HomeSection01 from "@/components/sections/Section01.vue";
import HomeSection02 from "@/components/sections/Section02.vue";
import HomeSection02A from "@/components/sections/Section02A.vue";
import HomeSection03 from "@/components/sections/Section03.vue";
import Banner from "@/components/common/Banner.vue";

import {GetHomeData} from "@/service/DataService"
const data = ref({banners: [], section1: [], section2: [], section3: []})
GetHomeData().then((res) => data.value = res.data)

</script>

<style scoped>
#section02 {
  display: flex;
}
#section02A {
  display: none;
}

@media screen and (max-width: 768px) {
  #section02 {
    display: none;
  }
  #section02A {
    display: flex;
  }
}
</style>
